<template>
  <view class="home-main">
    <!-- <hx-navbar ref="hxnb" :config="config" @clickBtn="onClickBtn" /> -->
    <view class="cont">
      <view class="logo-box">
        <!-- <img src="~@/assets/img/logo2.png" /> -->
        <img src="https://www.solacemeta.com/myosce/myoscePhoto/logo.png" />
      </view>
      <view class="top">
        <view class="title">麻烦留下您的联系方式，方便我们及时联系到您。</view>
        <u--form labelPosition="left" :model="form" :rules="formRules" ref="form" labelWidth="140" style="padding-bottom: 16rpx">
          <u-form-item label="身份:" borderBottom @click="showRecords = true;">
            <u--input v-model="form.typeName" border="bottom" readonly placeholder="请选择身份" @click="showRecords = true;"></u--input>
            <u-icon slot="right" name="arrow-right" @click="showRecords = true;"></u-icon>
          </u-form-item>
           <u-form-item label="手机号:" borderBottom>
            <u--input placeholder="请输入手机号" v-model="form.mobile" border="none"></u--input>
          </u-form-item>
        </u--form>
        <u-button @click="submit" color="linear-gradient(to right, #00b99e, #00e5c3)" shape="circle" text="提交" ></u-button>
      </view>
    </view>
    <u-picker confirmColor='#26A69A' :show="showRecords" keyName="name" :columns="recordsList" title="请选择身份" description="身份" @confirm='recordsSelect' @cancel="showRecords = false" @close="showRecords = false" itemHeight='80'>
    </u-picker>
    <quick-message ref="message"></quick-message>
  </view>
</template>
<script>
import hccmConfig from "@/common/hccm-config.js"
import mRequest from "@/api/index";
export default {
  data() {
    return {
      config: {
        title: "OSCE-联系我们",
        color: "#ffffff",
        back: false,
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#00b99e", "#25bba4", "#00e5c3", "#06eeca"]],
        // 滑动屏幕后切换颜色，注意颜色为数组时长度必须一样，还有使用滑动切换必须监听 onPageScroll 事件
        slideBackgroundColor: [0, ["#a9a1ff", "#6970ff", "#ff55ff", "#ff9999"]],
        // 状态栏 ，数组则为滑动变色
        statusBarBackground: ["", "#ffffff"],
      },
      form:{
        typeName: '',
        type: '',
        mobile: ''
      },
        // mobile: '350681199712290010',
      formRules: {
        type: {
					type: 'string',
					required: true,
					message: '请选择身份',
					trigger: ['blur', 'change']
				},
				mobile: {
					type: 'string',
					required: true,
					message: '请填写手机号',
					trigger: ['blur', 'change']
				},
      },
      recordsList: [[]],
      showRecords: false,
    };
  },
  onLoad(){
    this.getListTabulation()
  },
  onPageScroll(e) {
    // 重点，用到滑动切换必须加上
    // this.$refs.hxnb.pageScroll(e);
  },
  methods: {
    recordsSelect(e){
      console.log(e.value[0])
      this.form.type = e.value[0].value 
      this.form.typeName = e.value[0].name 
      this.showRecords = false
    },
    // 提交 查询
    submit(){
      if ( !this.form.typeName ){
        this.$refs.message.show({
          type:'error', //String 默认default
          msg:'请先选择身份', //String 显示内容 *
          direction:'top', //String 默认顶部显示
          icon:true, //Boolean|String 显示icon(false/true/string 默认显示icon)
          mask:true, //Boolean 遮罩（默认false没有遮罩）
          time:1000, //Number|Boolean 默认3000/false为不自动关闭
          customStyle:{ //自定义样式
            // color:'#FFFFFF', //字体图标色
            // backgroundColor:'rgba(0,0,0,.5)', //背景色
            fontSize: 12,
          }, 
          iconSize: 16, //Number 自定义icon大小(单位px 默认16 设置后会覆盖自定义样式里的设置优先级最高)
          iconColor: '', //String icon颜色(默认主题颜色 设置后会覆盖自定义样式里的设置优先级最高)
        })
        return
      }
      if ( !this.form.mobile ){
        this.$refs.message.show({
          type:'error', //String 默认default
          msg:'请先填写手机号', //String 显示内容 *
          direction:'top', //String 默认顶部显示
          icon:true, //Boolean|String 显示icon(false/true/string 默认显示icon)
          mask:true, //Boolean 遮罩（默认false没有遮罩）
          time:1000, //Number|Boolean 默认3000/false为不自动关闭
          customStyle:{ //自定义样式
            // color:'#FFFFFF', //字体图标色
            // backgroundColor:'rgba(0,0,0,.5)', //背景色
            fontSize: 12,
          }, 
          iconSize: 16, //Number 自定义icon大小(单位px 默认16 设置后会覆盖自定义样式里的设置优先级最高)
          iconColor: '', //String icon颜色(默认主题颜色 设置后会覆盖自定义样式里的设置优先级最高)
        })
        return
      }
      if ( !(/^1\d{10}$/.test(this.form.mobile)) ){
        this.$refs.message.show({
          type:'error', //String 默认default
          msg:'手机号格式输入有误', //String 显示内容 *
          direction:'top', //String 默认顶部显示
          icon:true, //Boolean|String 显示icon(false/true/string 默认显示icon)
          mask:true, //Boolean 遮罩（默认false没有遮罩）
          time:1000, //Number|Boolean 默认3000/false为不自动关闭
          customStyle:{ //自定义样式
            // color:'#FFFFFF', //字体图标色
            // backgroundColor:'rgba(0,0,0,.5)', //背景色
            fontSize: 12,
          }, 
          iconSize: 16, //Number 自定义icon大小(单位px 默认16 设置后会覆盖自定义样式里的设置优先级最高)
          iconColor: '', //String icon颜色(默认主题颜色 设置后会覆盖自定义样式里的设置优先级最高)
        })
        return
      }
      let params = {
        type: this.form.typeName,
        mobile: this.form.mobile
      }
      mRequest.linkPeopleAdd(params).then(res=>{
        if(res.code === 0){
          console.log(res.code === 0, 333)
          this.$refs.message.show({
            type:'success', //String 默认default
            msg:'信息提交成功', //String 显示内容 *
            direction:'top', //String 默认顶部显示
            icon:true, //Boolean|String 显示icon(false/true/string 默认显示icon)
            mask:true, //Boolean 遮罩（默认false没有遮罩）
            time:500, //Number|Boolean 默认3000/false为不自动关闭
            customStyle:{ //自定义样式
              // color:'#FFFFFF', //字体图标色
              // backgroundColor:'rgba(0,0,0,.5)', //背景色
              fontSize: 12,
            }, 
            iconSize: 16, //Number 自定义icon大小(单位px 默认16 设置后会覆盖自定义样式里的设置优先级最高)
            iconColor: '', //String icon颜色(默认主题颜色 设置后会覆盖自定义样式里的设置优先级最高)
          })
        }
        setTimeout(() => {
          this.form ={
            typeName: '',
            type: '',
            mobile: ''
          }
          uni.redirectTo({
            //关闭当前页面，跳转到应用内的某个页面。
            url: `/pages/updateSuccess`,
          });
        }, 500);
      })
    },
    onClickBtn(data) {
      //console.log(data);
      uni.showToast({
        title: `key为 ${data.key} 的按钮`,
        icon: "none",
        duration: 1300
      });
    },
    // 获取身份列表
    getListTabulation(){
      let params = {
      }
      mRequest.peopleTypeList(params).then(res=>{
        console.log(res.data)
        let recordsList = []
        if(res.data.length > 0){
          res.data.map(v => {
            recordsList.push({
              name: v.type,
              value: v.id
            })
          })
          this.recordsList = [recordsList]
        }
      })
    },
  }
};
</script>
<style lang='scss'>
.home-main {
  width: 100vw;
  height: 100vh;
  overflow: auto;
  .cont {
    .top {
      margin: 20rpx;
      background: #00b99e10;
      padding: 20rpx;
      border-radius: 8rpx;
    }
    .bottom{
      margin: 20rpx;
      background: #00b99e10;
      padding: 20rpx;
      border-radius: 8rpx;
      .title{
        padding-bottom: 10rpx;
        font-weight: 600;
        color: #333;
        font-size: 32rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .inner{
        border: 1px solid #00b99e80;
        border-radius: 10rpx;
        .line{
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 30rpx;
          font-weight: 400;
          .line-left{
            width: 180rpx;
            min-height: 100rpx;
            color: #333;
            border-bottom: 1px solid #00b99e80;
            display: flex;
            justify-content: flex-end;
            align-items: center;
          }
          .line-right{
            flex: 1;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            min-height: 100rpx;
            padding: 0 10rpx;
            border-left: 1px solid #00b99e80;
            border-bottom: 1px solid #00b99e80;
            .qr{
              height: 300rpx;
              width: 300rpx;
            }
          }
        }
        .line:last-of-type{
          .line-left{
            border-bottom: none;
            height: 400rpx;
          }
          .line-right{
            border-bottom: none;
            height: 400rpx;
            display: flex;
            align-content: center;
            justify-content: center;
          }
        }
      }
      .down{
        width: 100%;
        padding: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .u-text{
          justify-content: center !important;
        }
      }
    }
  }
  .logo-box{
    margin: 20px 20px;
    height: 120px;
    border-radius: 8px;
    background: linear-gradient(to right, #00CC99, #0066CC);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  img{
    height: 80px;
    width: 80px;
    border-radius: 8px;
  }
  .title{
    font-size: 14px;
    font-weight: 500;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>